<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button
          class="mint-button mint-button--default mint-button--normal"
          style="font-size: 15px;"
          @click="option"
        >
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title"></h1>
      <div class="mint-header-button is-right"></div>
    </header>
    <!-- <div style="height:40px"></div> -->
    <div>
      <mt-field label="开始日期:">
        <span style="color:#888" @click="addtime">{{ grantime }}</span>
      </mt-field>
      <mt-field label="时间段:" v-model="carid">
        <span @click="addcarid" style="color:#888" v-if="chouseval=='请选择时间段'">{{chouseval}}</span>
        <span @click="addcarid" style="color:#888" v-else>{{chouseval[0]}}</span>
      </mt-field>
      <mt-field label="结束结束:">
        <span style="color:#888" @click="addtime">{{ grantime }}</span>
      </mt-field>
      <mt-field label="时间段:" v-model="carid">
        <span @click="addcarid" style="color:#888" v-if="chouseval=='请选择时间段'">{{chouseval}}</span>
        <span @click="addcarid" style="color:#888" v-else>{{chouseval[0]}}</span>
      </mt-field>
      <mt-field label="时长（天）:" :placeholder="usedetail" v-model="usedetail" disabled></mt-field>
    </div>
    <div class="btn_f">
      <mt-button type="default" style="width:100px;margin-right:15px">取消</mt-button>
      <mt-button type="primary" style="width:100px">确定</mt-button>
    </div>
    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%">
      <mt-picker
        :slots="dataList"
        @change="onDateChange"
        :visible-item-count="5"
        :show-toolbar="true"
        value-key="cName"
      >
        <mt-button
          @click="handleConfirm2"
          class="sure"
          style="display:block;position: absolute;right: 0px;"
        >确认</mt-button>
      </mt-picker>
    </mt-popup>
    <div class="datePicker">
      <mt-datetime-picker
        ref="picker"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        @confirm="handleConfirm"
      />
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  layout: 'default2',
  data() {
    return {
      popupVisible22: false,
      grantime: '请选择时间',
      usedetail: 0,
      chousname: ['上午', '下午'],
      chouseval: '',
      dataList: [
        {
          flex: 1,
          values: ['上午', '下午'],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: ''
    }
  },
  mounted() {
    this.chouseval = '请选择时间段'
  },
  methods: {
    addtime() {
      this.$refs.picker.open()
    },
    addcarid() {
      //   const req = {
      //     handle: '0E56125B90D2898A62E387C1CED62EC408B04B35BD44D675',
      //     query: ''
      //   }
      //   this.spost(this.ts, '/mainservlet', req).then(ts => {
      //     let a = []
      //     let b = []
      //     for (let i = 0; i < ts.d.data.operation1.length; i++) {
      //       a.push(ts.d.data.operation1[i].hash.carno)
      //       b.push(ts.d.data.operation1[i].hash)
      //       //a[m] = { carid: ts.d.data.operation1[m].hash.carno }
      //     }
      //     this.dataList[0].values = a
      //     this.chousname = b
      //     console.log(this.chousname, 'wwwww')
      //   })
      this.popupVisible22 = true
    },
    onDateChange(picker, values) {
      console.log(picker)
      console.log(values)
      this.chouseval = values
    },
    //时间赋值
    handleConfirm(data) {
      console.log(data)
      this.grantime = this.formatDate(data)
    },
    option() {
      this.$router.go(-1)
    },
    //时间选择优化函数
    formatDate(date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    handleConfirm2() {
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    }
  }
}
</script>
<style scoped>
html {
  background: #f3f3f3;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
</style>
